<template>
	<view class="cell-out" @tap="onTap">
		<view class="cell-in" :class="[border&&'border-bottom']">
			<view class="cell-left">
				<slot/>
			</view>
			
			<view class="right-arrow" v-if="showArrow">
				<u--image width="24rpx" height="34rpx" src="/static/images/ui/bg/black-arrow.png"></u--image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bg-cell",
		props:{
			showArrow:{
				default:false
			},
			border:{
				default: true
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			onTap(){
				this.$emit("click", true)
			}
		}
	}
</script>

<style scoped>
.cell-out {
	width: 100%;
 	padding: 0rpx 24rpx;
	display: flex;
	overflow: hidden;
}
.cell-in {
	flex: 1 0 auto;
	padding:30rpx 0;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
}
.border-bottom {
	border-bottom: 1rpx solid #f7f7f7;
}
.cell-left {
	flex:1 0 auto;
	overflow: hidden;
}
.right-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 0  12rpx;
}
</style>